<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>我的试用</title>
    <!-- <link rel="dns-prefetch" href=""> -->
    <link rel="stylesheet" href="css/lib/reset.css">
    <link rel="stylesheet" href="libs/swiper/swiper.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/lib/flexible-163.js"></script>
    <script src="js/lib/jquery-2.2.4.min.js"></script>
    <script src="libs/swiper/swiper.min.js"></script>
</head>

<body ontouchstart class="index">
    <!-- 返回上一页 -->
    <div class="header">
        <a class="go-back" href="javascript:void(0)" onclick="history.go(-1)">返回</a>
        <h1 class="title">我的试用</h1>
        <span class="service">服务声明</span>
    </div>

    <div class="wrapper">
        <!-- 主体内容部分s -->
        <div class="container">

            <!-- 顶部轮播 -->
            <div class="banner-box swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="" title="">
                            <img class="banner-img" src="images/banner-new-pic.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="" title="">
                            <img class="banner-img" src="images/banner-new-pic.jpg" alt="">
                        </a>
                    </div>
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
            </div>

            <!-- 公告 -->
            <div class="notice-box">
                <div class="notice-hd iconfont">&#xe64c;</div>
                <div class="notice-bd">
                    <ul>
                        <li><a href="" title="1恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为">1恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为</a></li>
                        <li><a href="" title="2恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为">2恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为</a></li>
                        <li><a href="" title="3恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为">3恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为恭喜您，审核通过，被评定为</a></li>
                    </ul>
                </div>
            </div>

            <div class="tab-hd">
                <ul>
                    <li class="tab-hd-item active"><span>免费试用</span></li>
                    <li class="tab-hd-item"><span>付邮试用</span></li>
                    <li class="tab-hd-item"><span>折扣试用</span></li>
                </ul>
            </div>

            <div class="tab-bd">

                <!-- 免费试用 -->
                <div class="tab-hd-item part-box">
                    <div class="part-hd">
                        <h3 class="part-hd-title">免费试用</h3>
                        <p class="part-hd-detail">免费试用是向申请试用的用户开放申请，只有符合相应条件的用户获得申请试用的机会获得专享体验。</p>
                        <p class="part-hd-btn"><a class="btn btn-link fr" href="javascrip:;">知道了</a></p>
                    </div>
                    <!-- 产品列表 -->
                    <div class="part-bd">

                        <!-- 产品1 -->
                        <div class="part-bd-item">
                            <a class="item-link" href="">
                                <!-- 活动图标 -->
                                <span class="item-ico"><em>免费试用</em></span>
                                <!-- 产品主图 -->
                                <div class="item-view">
                                    <img class="item-img" src="images/goods-pic.jpg" alt="">
                                </div>
                                <!-- 产品详情 -->
                                <div class="item-detail">
                                    <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                    <p class="item-price">
                                        <span class="price-now">¥99.88</span>
                                        <del class="price-old">¥577.02</del>
                                    </p>
                                    <p class="item-count">
                                        <span class="apply-count">限量3件</span>
                                        <span class="apply-person">891757人申请</span>
                                    </p>
                                    <p class="item-btn">
                                        <span class="btn btn-link">立即试用</span>
                                    </p>
                                </div>
                            </a>
                        </div>

                        <!-- 产品2 -->
                        <div class="part-bd-item">
                            <a class="item-link" href="">
                                <!-- 活动图标 -->
                                <span class="item-ico"><em>免费试用</em></span>
                                <!-- 产品主图 -->
                                <div class="item-view">
                                    <img class="item-img" src="images/goods-pic.jpg" alt="">
                                </div>
                                <!-- 产品详情 -->
                                <div class="item-detail">
                                    <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                    <p class="item-price">
                                        <span class="price-now">¥99.88</span>
                                        <del class="price-old">¥577.02</del>
                                    </p>
                                    <p class="item-count">
                                        <span class="apply-count">限量3件</span>
                                        <span class="apply-person">891757人申请</span>
                                    </p>
                                    <p class="item-btn">
                                        <span class="btn btn-link">立即试用</span>
                                    </p>
                                </div>
                            </a>
                        </div>


                    </div>

                </div>

                <!-- 付邮试用 -->
                <div class="tab-hd-item part-box">
                    <div class="part-hd">
                        <h3 class="part-hd-title">付邮试用</h3>
                        <p class="part-hd-detail">付邮试用是向申请试用的用户开放申请，只有符合相应条件的用户获得申请试用的机会获得专享体验。</p>
                        <p class="part-hd-btn"><a class="btn btn-link fr" href="javascrip:;">知道了</a></p>
                    </div>
                    <!-- 产品列表 -->
                    <div class="part-bd">

                        <!-- 产品1 -->
                        <div class="part-bd-item">
                            <a class="item-link" href="">
                                <!-- 活动图标 -->
                                <span class="item-ico"><em>付邮试用</em></span>
                                <!-- 产品主图 -->
                                <div class="item-view">
                                    <img class="item-img" src="images/goods-pic.jpg" alt="">
                                </div>
                                <!-- 产品详情 -->
                                <div class="item-detail">
                                    <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                    <p class="item-price">
                                        <span class="price-now">¥99.88</span>
                                        <del class="price-old">¥577.02</del>
                                    </p>
                                    <p class="item-count">
                                        <span class="apply-count">限量3件</span>
                                        <span class="apply-person">891757人申请</span>
                                    </p>
                                    <p class="item-btn">
                                        <span class="btn btn-link">立即试用</span>
                                    </p>
                                </div>
                            </a>
                        </div>

                        <!-- 产品2 -->
                        <div class="part-bd-item">
                            <a class="item-link" href="">
                                <!-- 活动图标 -->
                                <span class="item-ico"><em>付邮试用</em></span>
                                <!-- 产品主图 -->
                                <div class="item-view">
                                    <img class="item-img" src="images/goods-pic.jpg" alt="">
                                </div>
                                <!-- 产品详情 -->
                                <div class="item-detail">
                                    <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                    <p class="item-price">
                                        <span class="price-now">¥99.88</span>
                                        <del class="price-old">¥577.02</del>
                                    </p>
                                    <p class="item-count">
                                        <span class="apply-count">限量3件</span>
                                        <span class="apply-person">891757人申请</span>
                                    </p>
                                    <p class="item-btn">
                                        <span class="btn btn-link">立即试用</span>
                                    </p>
                                </div>
                            </a>
                        </div>


                    </div>

                </div>

                <!-- 折扣试用 -->
                <div class="tab-hd-item part-box">
                    <div class="part-hd">
                        <h3 class="part-hd-title">折扣试用</h3>
                        <p class="part-hd-detail">折扣试用是向申请试用的用户开放申请，只有符合相应条件的用户获得申请试用的机会获得专享体验。</p>
                        <p class="part-hd-btn"><a class="btn btn-link fr" href="javascrip:;">知道了</a></p>
                    </div>
                    <!-- 产品列表 -->
                    <div class="part-bd">

                        <!-- 产品1 -->
                        <div class="part-bd-item">
                            <a class="item-link" href="">
                                <!-- 活动图标 -->
                                <span class="item-ico"><em>折扣试用</em></span>
                                <!-- 产品主图 -->
                                <div class="item-view">
                                    <img class="item-img" src="images/goods-pic.jpg" alt="">
                                </div>
                                <!-- 产品详情 -->
                                <div class="item-detail">
                                    <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                    <p class="item-price">
                                        <span class="price-now">¥99.88</span>
                                        <del class="price-old">¥577.02</del>
                                    </p>
                                    <p class="item-count">
                                        <span class="apply-count">限量3件</span>
                                        <span class="apply-person">891757人申请</span>
                                    </p>
                                    <p class="item-btn">
                                        <span class="btn btn-link">立即试用</span>
                                    </p>
                                </div>
                            </a>
                        </div>

                        <!-- 产品2 -->
                        <div class="part-bd-item">
                            <a class="item-link" href="">
                                <!-- 活动图标 -->
                                <span class="item-ico"><em>折扣试用</em></span>
                                <!-- 产品主图 -->
                                <div class="item-view">
                                    <img class="item-img" src="images/goods-pic.jpg" alt="">
                                </div>
                                <!-- 产品详情 -->
                                <div class="item-detail">
                                    <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                    <p class="item-price">
                                        <span class="price-now">¥99.88</span>
                                        <del class="price-old">¥577.02</del>
                                    </p>
                                    <p class="item-count">
                                        <span class="apply-count">限量3件</span>
                                        <span class="apply-person">891757人申请</span>
                                    </p>
                                    <p class="item-btn">
                                        <span class="btn btn-link">立即试用</span>
                                    </p>
                                </div>
                            </a>
                        </div>


                    </div>

                </div>

            </div>

            <!-- 精选推荐 -->
            <div class="floor-box tj-box">
                <h3 class="floor-hd"><img src="images/title-tj.png" alt="精选推荐"></h3>
                <div class="floor-bd">
                    <!-- 产品1 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <!-- 产品2 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <!-- 产品3 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <!-- 产品4 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                </div>
            </div>

            <!-- 价/格/说/明 -->
            <div class="des-box">
                <h3 class="des-hd">价/格/说/明</h3>
                <div class="des-bd">
                    <dl>
                        <dt>划线价格：</dt>
                        <dd>是指品牌专柜价、商品吊牌价 、厂家指导价或该商品曾经展示过的销售价等，并非原价，仅供参考。 未划线价格： 是指商品</dd>
                    </dl>
                    <dl>
                        <dt>划线价格：</dt>
                        <dd>是指品牌专柜价、商品吊牌价 、厂家指导价或该商品曾经展示过的销售价等，并非原价，仅供参考。 未划线价格： 是指商品</dd>
                    </dl>
                </div>
            </div>

            <!-- 活/动/规/则 -->
            <div class="des-box">
                <h3 class="des-hd">活/动/规/则</h3>
                <div class="des-bd">
                    <p>活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动</p>
                </div>
            </div>


        </div>
    </div>

    <!-- 侧边栏导航 -->
    <div id="side-bar">
        <div class="side-bar-item side-bar-my">
            <a class="iconfont item-my" href="" title="个人中心">&#xe62f;</a>
        </div>
        <div class="side-bar-item side-bar-cart">
            <a class="iconfont item-cart" href="" title="购物车">&#xe628;</a>
        </div>
        <div class="side-bar-item side-bar-share J-side-bar-share">
            <a class="iconfont item-share" href="javascript:;" title="分享">&#xe613;</a>
        </div>
    </div>

    <!-- 返回顶部 -->
    <div id="goTop"></div>

    <!-- 分享 -->
    <div id="share">
        <div class="mask"></div>
    </div>



    <script>
        $(function() {
            //头部轮播
            var slideBanner = new Swiper('.banner-box', {
                autoplayDisableOnInteraction: false,
                autoplay: 3000,
                visibilityFullFit: true,
                loop: true,
                pagination: '.swiper-pagination'
            });

            // 公告轮播
            setInterval(function(){
                var leiHei = $('.notice-bd').find('ul:first').find('li').height()
                $('.notice-bd').find('ul:first').animate({
                    marginTop: -leiHei
                },
                500,
                function() {
                    $(this).css({
                        marginTop: '0'
                    }).find('li:first').appendTo(this);
                });
            }, 2000)

            // 活动说明的显示隐藏
            $('.part-hd .part-hd-title').on('click', function() {
                $(this).toggleClass('show').siblings().toggle();
            });
            $('.part-hd').find('.btn').on('click', function() {
                $(this).closest('.part-hd-btn').siblings('.part-hd-detail').hide();
                $(this).closest('.part-hd-btn').hide();
            });

            /**
             * [fixElement el吸顶]
             * @param  {[type]} el [要吸顶的DOM]
             * @return {[type]}    [description]
             */
            function fixElement(el) {
                let scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                let tabPos = $(el).offset().top;
                if (scrollPos > 180) {
                    $(el).addClass('fixed');
                } else {
                    $(el).removeClass('fixed');
                }
            }


            // 滚动联动
            function scrollNav() {
                var hei = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var lengths = $('.tab-bd .tab-hd-item').length;

                $('.tab-bd .tab-hd-item').each(function(index) {
                    var $thisHei = $(this).height();
                    var $thisTop = $(this).offset().top + 60;
                    var $this = hei - $thisTop + 80;
                    if ($this > 0 && $this < $thisTop) {
                        $('.tab-hd li').eq(index).addClass('active').siblings('li').removeClass('active');
                    }
                    
                });

                // tab范围外
                var $outHei = $('.tj-box').offset().top;
                if( ($outHei - hei - 60) < 0 ){
                    $('.tab-hd li').removeClass('active')
                }
            };

            $(window).scroll(function() {
                scrollNav();
                fixElement('.tab-hd');
            });

            // 导航           
            $('.tab-hd li').on('click', function() {
                var index = $(this).index();
                var hei = $('.tab-bd .tab-hd-item').eq(index).offset().top;
                $(this).addClass('active').siblings('li').removeClass('active');
                $(window).scrollTop(hei);
            });

            // 分享
            $('.J-side-bar-share').click(function(event){
                event.preventDefault();
                $('#share').show();
            });
            $('#share').click(function(){
                $(this).hide();
            })
            

        });
    </script>

</body>

</html>